import React, { Fragment } from 'react'
import { View, StyleSheet, Text } from 'react-native'
import PropTypes from 'prop-types'
import CustomImage from '../image/CustomImage'
import { ScaleS, ScaleT } from '../../utils/ScreenUtil'

export default function ImageOverlap (props) {
  const { images, maxNum } = props
  if (images.length > maxNum) {
    return (
      <View style={styles.imageView}>
        {
          new Array(maxNum).fill(0).map((e, i) => {
            if (i === maxNum - 1) {
              return (
                <Fragment key={i}>
                  <CustomImage
                    style={[styles.imageItem, { right: ScaleS(16 * (maxNum - 1) - 16 * i) }]}
                    source={{ uri: images[i].imgUrl }}/>
                  <Text style={styles.remainText}>{`+${images.length}`}</Text>
                </Fragment>
              )
            } else {
              return (
                <CustomImage
                  key={i} style={[styles.imageItem, { right: ScaleS(16 * (maxNum - 1) - 16 * i) }]}
                  source={{ uri: images[i].imgUrl }}/>
              )
            }
          })
        }
      </View>
    )
  } else if (images.length > 0) {
    return (
      <View style={styles.imageView}>
        {images.map((item, index) => {
          const imgLength = images.length
          if (index === imgLength - 1) {
            return (
              <Fragment key={index}>
                <CustomImage
                  style={[styles.imageItem, { right: ScaleS(16 * (imgLength - 1) - 16 * index) }]}
                  source={{ uri: images[index].imgUrl }}/>
                <Text style={styles.remainText}>{`+${images.length}`}</Text>
              </Fragment>
            )
          } else {
            return (
              <CustomImage
                key={index}
                style={[styles.imageItem, { zIndex: index, right: ScaleS(16 * (imgLength - 1) - 16 * index) }]}
                source={{ uri: images[index].imgUrl }}/>
            )
          }
        })}
      </View>
    )
  } else {
    return null
  }
}

ImageOverlap.defaultProps = {
  images: [],
  maxNum: 2
}
ImageOverlap.propTypes = {
  images: PropTypes.array,
  maxNum: PropTypes.number
}

const styles = StyleSheet.create({
  imageView: {
    alignItems: 'center',
    flexDirection: 'row',
    position: 'relative'
  },
  imageItem: {
    width: ScaleS(32),
    height: ScaleS(32),
    borderRadius: ScaleS(16),
    position: 'absolute',
    resizeMode: 'cover'
  },
  remainText: {
    width: ScaleS(32),
    height: ScaleS(32),
    color: 'white',
    fontSize: ScaleT(15),
    fontWeight: '400',
    textAlign: 'center',
    lineHeight: ScaleS(32)
  }
})
